<template>
  <div>
    <!-- 查询条件 -->
    <el-card shadow="hover" style="margin-bottom: 20px">
      <div class="flex-warp">
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-input
              placeholder="请输入考试名称"
              size="small"
              suffix-icon="el-icon-search"
              v-model="listQueryParam.examName"
            ></el-input>
          </div>
        </div>
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-input
              placeholder="请输入老师姓名"
              size="small"
              suffix-icon="el-icon-search"
              v-model="listQueryParam.name"
            ></el-input>
          </div>
        </div>
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-button
              size="small"
              icon="el-icon-search"
              @click="search"
            >搜索</el-button>
          </div>
        </div>
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-button
              type="primary"
              size="small"
              icon="el-icon-refresh-right"
              @click="refresh"
            >刷新</el-button>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 表格展示 -->
    <el-card shadow="hover" class="mt15">
      <el-table
        :data="tableData"
        stripe
        ref="multipleTable"
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          align="center"
          label="发布老师姓名"
        ></el-table-column>
        <el-table-column
          prop="avatar"
          align="center"
          width="80"
          label="老师照片"
        >
          <template slot-scope="scope">
            <ImgPreview :src="scope.row.avatar"></ImgPreview>
          </template>
        </el-table-column>
        <el-table-column
          prop="examName"
          align="center"
          label="考试名称"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间"
        ></el-table-column>
        <el-table-column
          prop="remark"
          align="center"
          label="备注"
        ></el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-button
              type="success"
              size="small"
              @click="addQuestion(scope.row)"
            >添加题目</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQueryParam.current"
        :limit.sync="listQueryParam.pageSize"
        @pagination="getTableDataList"
      />
    </el-card>
  </div>
</template>

<script>
import { getList } from '@/api/Exam/index';
import Pagination from '@/components/Pagination';
import ImgPreview from '@/components/ImgPreview';

export default {
  components: {
    Pagination,
    ImgPreview
  },
  data() {
    return {
      type: localStorage.getItem('examType'),
      listQueryParam: {
        current: 1,
        pageSize: 5,
        examName: '',
        name: ''
      },
      tableData: [],
      total: 0
    };
  },
  methods: {
    getTableDataList() {
      if (this.type == 1) {
        this.listQueryParam.teacherId = localStorage.getItem('examId')
      }
      getList(this.listQueryParam).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.records;
      });
    },
    search() {
      this.listQueryParam.current = 1;
      this.getTableDataList();
    },
    refresh() {
      this.listQueryParam = {
        current: 1,
        pageSize: 5,
        examName: '',
        name: ''
      };
      this.getTableDataList();
    },
    addQuestion(row) {
      // 跳转到添加试题页面，并传递当前考试ID
      console.log("传递的 examId:", row.id); // 确认 examId 是否正确获取
      this.$router.push({ path: '/Questions/adddetail', query: { examId: row.id } });
    }
  },
  mounted() {
    this.getTableDataList();
  }
};
</script>

<style scoped>
.flex-warp {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-warp-item {
  margin-right: 10px;
}

.mt15 {
  margin-top: 15px;
}
</style>